<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- AI智能课程 -->
<template>
    <div class="Ai_container" @click="toAiClick" :style="{ 'background-color': background }">
        <p class="title" :class="{grayStyle: !connected, 'rtl-l text-r': $rtl}">
            {{$t('BDT_fascialgun_course_recommendation')}}
        </p>
        <img class="right_icon" :class="{grayStyle: !connected}" :src="rightIcon">
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data(){
        return {
            background: window.isDark ? '#202224' : '#FFFFFF',
            rightIcon: window.isDark ? require('@/assets/image/dark/ic_public_right_dark.png') : require('@/assets/image/ic_public_right.svg')
        }
    },
    computed: {
        ...mapState([ 'connected' ])
    },
    methods:{
        toAiClick(){
            if(!this.connected) return;
            this.$router.push('aiRecommend');
        }
    }
}
</script>

<style scoped>
    .Ai_container{
        background: #fff;
        border-radius: 1.6rem;
        margin-top: 1.2rem;
        height: 4.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .4rem 1.2rem;
    }

    .title{
        font-weight: 500;
        font-size: 1.6rem;
    }

    .right_icon{
        width: 1.2rem;
        height: 2.4rem;
    }
</style>